<template>
	<view class="container">
		<!-- 顶部用户信息 -->
		<view class="user-header">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
				<view class="user-detail">
					<text class="nickname">{{"你好，"+userInfo.name || '未登录'}}</text>
					<text class="driver-id">司机ID：{{userInfo.driverId || '--'}}</text>
				</view>
			</view>
		</view>
		
		<!-- 收入统计卡片 -->
		<view class="income-card">
			<view class="income-item">
				<text class="label">总收入</text>
				<text class="amount">￥{{totalIncome}}</text>
			</view>
			<view class="income-item">
				<text class="label">可提现金额</text>
				<text class="amount">￥{{availableBalance}}</text>
				<button class="withdraw-btn" @tap="handleWithdraw" :disabled="availableBalance <= 0">去提现</button>
			</view>
		</view>
		
		<!-- 功能菜单列表 -->
		<view class="menu-list">
			<view class="menu-group">
				<view class="menu-item" @tap="goToIncomeRecord">
					<view class="menu-item-left">
						<image src="/static/images/income-record.png" mode="aspectFit"></image>
						<text>收入记录</text>
					</view>
					<image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
				<view class="menu-item" @tap="contactPassenger">
					<view class="menu-item-left">
						<image src="/static/images/message.png" mode="aspectFit"></image>
						<text>与乘客联系</text>
					</view>
					<image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
				<view class="menu-item" @tap="contactService">
					<view class="menu-item-left">
						<image src="/static/images/service.png" mode="aspectFit"></image>
						<text>联系客服</text>
					</view>
					<image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
				<view class="menu-item" @tap="goToSettings">
					<view class="menu-item-left">
						<image src="/static/images/settings.png" mode="aspectFit"></image>
						<text>设置</text>
					</view>
					<image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: '',
					name: '张师傅',
					driverId: 'DR20240315001'
				},
				totalIncome: 0,
				availableBalance: 0
			}
		},
		onShow() {
			this.getUserInfo()
			this.getIncomeInfo()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				// TODO: 调用后端API获取用户信息
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						// 假设后端返回的用户信息包含可用余额
						this.userInfo = res.data
						this.totalIncome = res.data.balance
						this.availableBalance = res.data.withdrawableBalance
						console.log(this.userInfo,'用户信息')
					}
				})
			},
			// 获取收入信息
			getIncomeInfo() {
				// TODO: 调用后端API获取收入信息
				// 模拟数据
				this.totalIncome = 8888.88
				this.availableBalance = 666.66
			},
			// 提现处理
			handleWithdraw() {
				uni.navigateTo({
					url: '/pages/money/money'
				})
			},
			// 页面跳转方法
			goToSettings() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			},
			goToIncomeRecord() {
				uni.navigateTo({
					url: '/pages/revenueRecords/revenueRecords'
				})
			},
			contactPassenger() {
				uni.navigateTo({
					url: '/pages/contactPassenger/contactPassenger'
				})
			},
			contactService() {
				uni.navigateTo({
					url: '/pages/service/service'
				})
			},
		}
	}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

.user-header {
	background-color: #1B6EF3;
	padding: 40rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.user-info {
	display: flex;
	align-items: center;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 4rpx solid #ffffff;
}

.user-detail {
	margin-left: 20rpx;
}

.nickname {
	font-size: 36rpx;
	color: #ffffff;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.driver-id {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

.settings-btn {
	padding: 10rpx;
}

.settings-btn image {
	width: 48rpx;
	height: 48rpx;
}

.income-card {
	margin: 20rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.income-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
}

.income-item:first-child {
	border-bottom: 1rpx solid #f0f0f0;
}

.label {
	font-size: 28rpx;
	color: #666;
}

.amount {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
}

.withdraw-btn {
	background-color: #1B6EF3;
	color: #ffffff;
	font-size: 26rpx;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	margin: 0;
}

.withdraw-btn[disabled] {
	background-color: #cccccc;
}

.menu-list {
	margin: 20rpx;
}

.menu-group {
	background-color: #ffffff;
	border-radius: 12rpx;
	overflow: hidden;
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item-left {
	display: flex;
	align-items: center;
}

.menu-item-left image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.menu-item-left text {
	font-size: 28rpx;
	color: #333;
}

.arrow {
	width: 32rpx;
	height: 32rpx;
}

.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-item image {
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 6rpx;
}

.nav-item text {
	font-size: 22rpx;
	color: #666;
}

.nav-item.active text {
	color: #1B6EF3;
}
</style>
